<!--电子合同-->
<template>
  <a-card
    style="height: 100%; width: 100%; display: flex; flex-direction: column"
    :bodyStyle="{ flex: 1, height: 0, padding: '6px' }"
  >
    <template #title>
      <!--      <cu-icon class="icon-primary" type="org-hetong" />-->
      待处理报修工单
    </template>
    <template #extra>
      <a-button type="link" size="small" @click="goMore"
        >更多 &nbsp;&gt;</a-button
      >
    </template>
    <a-spin :spinning="spinning">
      <a-row class="box hide-scroller-bar" :gutter="[0, 8]">
        <a-col v-for="item in orderList" :key="item.id" :span="24">
          <a-row class="list-box">
            <a-row class="list-item">
              <a-col>{{ item.subcat_name }}</a-col>
              <a-col
                ><a-tag :color="getStatusColor(item.status)">{{
                  item.status_txt
                }}</a-tag></a-col
              >
            </a-row>
            <a-row class="mtb-10 list-row">
              <a-col :span="12">
                <a-row align="middle">
                  <EnvironmentOutlined style="margin-right: 2px" />
                  <a-tooltip placement="topLeft">
                    <template #title>
                      {{
                        item.position ||
                        item.room_info ||
                        item.repair_type_txt ||
                        ""
                      }}</template
                    >
                    <span class="text">
                      {{
                        item.position ||
                        item.room_info ||
                        item.repair_type_txt ||
                        ""
                      }}
                    </span>
                  </a-tooltip>
                </a-row>
              </a-col>
              <a-col :span="12">
                <span style="margin-right: 2px"><ClockCircleOutlined /></span>
                <span>{{ item.created_at }}</span>
              </a-col>
            </a-row>
          </a-row>
        </a-col>
      </a-row>
    </a-spin>
  </a-card>
</template>
<script>
import {
  defineComponent,
  ref,
  computed,
  watch,
  onMounted,
  onBeforeUnmount,
  reactive,
  nextTick,
  toRefs,
} from "vue";
import { Empty, message, Modal, Progress } from "ant-design-vue";
import request from "../../../common/utils/request";
import utils from "@/common/utils/utils";
import RouteUtils from "../../../router/router.utils.js";
import {
  EnvironmentOutlined,
  ClockCircleOutlined,
} from "@ant-design/icons-vue";
export default defineComponent({
  name: "WorkOrderTrend",
  components: { EnvironmentOutlined, ClockCircleOutlined },
  setup(props, context) {
    const state = reactive({
      spinning: false,
      orderList: [],
      page: 1,
      total: 0,
      canNext: true,
    });

    const goMore = () => {
      window.microApp.forceDispatch({
        type: "SetMicroPages",
        microInfo: {
          microId: 'org_home_repair_control',
          app: 'workOrder',
          name: "工单调度",
          url: '/repair/control',
        }
      })
    };

    const getWorkorder = () => {
      state.spinning = true;
      request.get("/org", "/workbench/workorder_todo_info").then((res) => {
        state.orderList = res.list;
        state.spinning = false;
      });
    };
    getWorkorder();

    //根据不同status渲染tag颜色
    const getStatusColor = (status) => {
      let color = " ";
      switch (status) {
        case 1:
          color = "#1D77FF";
          break;
        case 2:
          color = "#68D2FF";
          break;
        case 3:
          color = "#3CE9CA";
          break;
        case 4:
          color = "#FFD12D";
          break;
        case 5:
          color = "#B3B3B3";
          break;
        case 6:
          color = "#B3B3B3";
          break;
        case 7:
          color = "#8134FF";
          break;
        case 8:
          color = "#FFD12D";
          break;
        case 9:
          color = "#75D13D";
          break;
      }
      return color;
    };

    return {
      ...toRefs(state),
      goMore,
      getStatusColor,
    };
  },
});
</script>

<style lang="less" scoped>
:deep(.ant-progress-text) {
  color: #666;
}
.box {
  // display: flex;
  // justify-content: space-between;
  width: 100%;
  height: 100%;
  padding: 10px;
  overflow-y: scroll;
  :deep(.ant-card-body) {
    padding: 10px;
  }

  .list-box {
    width: 100%;
    background: #f5f7fa;
    padding: 10px;
    .list-row {
      width: 100%;
    }
    .list-item {
      width: 100%;
      display: flex;
      justify-content: space-between;
      margin-bottom: 10px;
    }
    .text {
      width: 80%;
      color: #9b9b9b;
      display: inline-block;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .mtb-10 {
      margin-top: 5px;
      margin-bottom: 5px;
    }
  }

  .card-border {
    border-radius: 10px;
    .footer {
      margin-top: 20px;
    }
  }
  .icon-box {
    width: 50px;
    height: 50px;
    background: #165dff;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
  }
  .contentList {
    margin-top: 20px;
  }
  .build-list {
    width: 100%;
    height: 90px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #f5f5f5;
    margin-bottom: 20px;
    font-size: 20px;
    font-weight: 600;
    cursor: pointer;
    border-radius: 5px;
  }
  .build-bg {
    border: 1px solid #1890ff;
    color: #1890ff;
  }

  .orderCol :hover {
    transform: scale(1.1);
    box-shadow: 0 0 10px #1890ff;
  }
  .order {
    height: 110px;
    background: #f5f7fa;
    border: 1px solid #e9e9e9;
    padding: 10px;
    cursor: pointer;
    .text {
      color: #9b9b9b;
      display: inline-block;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      margin-left: 5px;
    }
  }
  .order :hover {
    transform: scale(1);
    box-shadow: none;
  }

  .order-list {
    display: flex;
    margin-bottom: 20px;
    .level {
      width: 80px;
      background: #f5f5f5;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-right: 10px;
    }
    .order {
      height: 110px;
      background: #f5f7fa;
      border: 1px solid #e9e9e9;
      padding: 10px;
      display: flex;
      cursor: pointer;
    }
    .text {
      color: #9b9b9b;
      display: inline-block;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      margin-left: 5px;
    }

    .order-col {
      width: 100%;
      height: 100%;
      background: #f5f7fa;
    }
  }
}
.icon-primary {
  color: @primary-color;
  font-size: 18px;
}
:deep(.ant-spin-nested-loading) {
  height: 100%;
}
:deep(.ant-spin-container) {
  height: 100%;
}
</style>
